<template>
  <section>
    <div class="question-title">{{xcform_base_xctitle.value}}
      <div class="required" v-if="xcform_prop_required.value==true">(*)</div>
      <i class="el el-icon-view" v-if="xcform_prop_hidden.value===false"></i>
    </div>
    <div>
      <el-table style="width: 100%" empty-text="无">
        <el-table-column type="selection" width="55"></el-table-column>
        <template v-for="item in sr.fields">
          <template v-for="item2 in xcform_base_property_input_subtable.showfields">
            <el-table-column v-if="item.name==item2" :prop="item.name" :label="item.comment" width="180">
            </el-table-column>
          </template>
        </template>
      </el-table>
      <el-row>
        <el-button type="primary" size="mini">新增</el-button>
        <el-button size="mini">删除</el-button>
      </el-row>
    </div>
  </section>
</template>

<script>
  import {
    xcflowGenerateRequestUrl
  } from '@/utils/xcflow';

  export default {
    props: {
      xcform_base_inputfieldcode: {
        type: Object
      },
      xcform_base_xctitle: {
        type: Object
      },
      xcform_base_selecttablefield: {
        type: Object
      },
      xcform_base_property_input_subtable: {
        type: Object
      },
      xcform_prop_required: {
        type: Object
      },
      xcform_prop_readonly: {
        type: Object
      },
      xcform_prop_hidden: {
        type: Object
      },
      xcform_layout_span: {
        type: Object
      },
    },
    watch: {
      'xcform_base_property_input_subtable.tablename': {
        handler(newVal, oldVal) {
          let that = this;
          that.xinit();
        },
        deep: true
      },
    },
    data() {
      return {
        sr: {
          fields: []
        }
      }
    },
    mounted() {
      let that = this;
      that.xinit();
    },
    destroyed() {

    },
    methods: {
      xinit: function() {
        let that = this;
        let tablename = that.xcform_base_property_input_subtable.tablename;
        let url = xcflowGenerateRequestUrl(this, "queryFieldsByTableName?tablename=" + tablename);
        let method = 'get';
        that.$axios({
          method,
          url
        }).then(resp => {
          that.sr.fields = resp.data.data.list;
        });
      }
    }
  }
</script>
<style>
  .el-table__header,
  .el-table__body,
  .el-table__footer {
    width: 100% !important;
  }

  .el {
    padding-left: 10px;
  }
</style>
